<template>
    <el-select v-model="value" clearable filterable remote reserve-keyword placeholder="菜单搜索" no-data-text="暂无数据"
        :remote-method="remoteMethod" :loading="loading" style="width: 240px" @change="toMenu">
        <template #prefix>
            <el-icon class="prefix-icon">
                <Search />
            </el-icon>
        </template>
        <el-option v-for="item in options" :key="item.path" :label="item.title" :value="item.path" />
    </el-select>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import api from "@/api/index"
import { useRouter } from 'vue-router'

const loading = ref(false)
const value = ref()
const options = ref([])
const userInfo = ref()

const router = useRouter()
function toMenu(value) {
    if (value) {
        router.push(value)
    }
}

const remoteMethod = (query) => {
    if (query) {
        loading.value = true
        let param = {
            roleId: userInfo.value.role.roleId,
            title: query
        }
        api.post('/author/menu/queryMenu', param).then(res => {
            if (res.data.code === 200) {
                options.value = res.data.data
            } else {
                ElMessage.error(res.data.msg)
            }
        })
        loading.value = false
    }
}

onMounted(() => {
    let str = window.localStorage.getItem("access-admin")
    userInfo.value = JSON.parse(str)
})

</script>

<style lang="less" scoped>
::v-deep(.el-select__wrapper) {
    border-radius: 15px;
    width: 110px;
}

::v-deep(.el-select__wrapper.is-focused) {
    box-shadow: 0 0 0 1px #dcdfe6;
    width: 240px;
}

::v-deep(.el-select__wrapper.is-hovering) {
    box-shadow: 0 0 0 1px #dcdfe6;
}
</style>
